<template>
  <div id="outsourcingTable">
    <div class="outsourcingTable">
      <el-table
        height="400px"
        ref="Table"
        :data="tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
        style="width: 100%"
        @select="select"
      >
        <el-table-column v-if="!isShow" type="selection" width="55">
        </el-table-column>
        <el-table-column
          v-for="(item, index) of headDataData"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div v-if="item.slot">
              <slot :name="item.prop" v-bind:row="scope.row"></slot>
            </div>
            <div v-if="!item.slot">
              {{ tableData[scope.$index][item.prop] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!isShow" label="操作">
          <template slot-scope="scope">
            <div>
              <slot name="operation" v-bind:row="scope.row"></slot>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
    <script>
export default {
  name: "outsourcingTable",
  data() {
    return {};
  },
  props: {
    headData: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    pageSizes: {
      type: Array,
      default: () => [],
    },
    pageNum: {
      type: Number,
      default: () => 1,
    },
    pageSize: {
      type: Number,
      default: () => 10,
    },
    isShow: {
      type: Number,
      default: () => 1,
    },
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("handleCurrentChange", val);
    },
    select(selection) {
      this.$emit("select", selection);
    },
  },
  mounted() {
    console.log(this.tableData);
  },
  computed: {
    headDataData() {
      return this.headData.filter((item) => {
        return item.show == this.isShow || item.show == 2;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.pagination {
  text-align: right;
  margin-top: 20px;
}
</style>